<template>
	<view class="content">
		<view class="topic">
			<navigator url="url" class="url">
				<view class="left">头像</view>
				<view class="right" @click="selectPic">
					<image :src="pic" mode="widthFix"></image>
				</view>
			</navigator>
		</view>
		<item :left="'昵称'"></item>
		<item :left="'性别'" :right="'男'"></item>
		<item :left="'生日'" :right="'2000-09-12'"></item>
		<item :left="'绑定手机号'" :right="'17613866912'"></item>
		<item :left="'集团员工'" :right="'未绑定'"></item>
		<item :left="'关于'"></item>
		<navigator class="tui">
			退出登录
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic: this.$store.state.gTitle.pic
			}
		},

		methods: {
			selectPic() {
				var that = this;
				//选择图片
				uni.chooseImage({
					count: 1, //默认选3张
					success(res) {
						//上传图片
						uni.uploadFile({
							//上传地址
							url: 'http://520mg.com/ajax/file.php',
							//图片信息
							filePath: res.tempFilePaths[0],
							// that.pic = that.pic.concat(filePath),
							//name需要和后端约定，默认都会叫file
							name: 'file',
							success: result => {
								//转换为json 
								var data = JSON.parse(result.data);

								//添加域名后加入list 
								that.pic = "http://520mg.com" + data.pic;
								that.$store.state.gTitle.pic = "http://520mg.com" + data.pic;
								console.log(that.$store.state.gTitle.pic);
							}
						})

					}
				})
			}
		},
		watch: {
			"pic": {
				handler() {
					this.$store.commit("Setpic", this.pic)
				},
				deep: true
			}
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f7f7f7;

		.topic {
			width: 100%;
			background-color: #fff;

			.url {
				width: 340px;
				height: 60px;
				margin: 0 auto;
				display: flex;
				align-items: center;
				background-color: #fff;
				justify-content: space-between;
				border-bottom: 1rpx solid #f0f0f0;
				box-sizing: border-box;

				.right {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					background-color: aqua;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						width: 50px;
						height: 50px;
					}
				}

			}
		}



		.tui {
			display: inline-block;
			width: 100vw;
			height: 60px;
			background-color: #fff;
			margin-top: 20px;
			line-height: 60px;
			text-align: center;
		}
	}
</style>
